<template>
  <!-- products -->
  <div class="products">
    <div class="products__title" v-if="totalPrice > 0">{{ shopName }}</div>
    <!-- 包 -->
    <div class="products__wrapper">
      <!-- 列表 -->
      <div class="products__list">
        <!-- 每一项 -->
        <template v-for="item in shopList" :key="item._id">
          <div class="products__item" v-if="item.count > 0">
            <img class="products__item__img" :src="item.imgUrl" alt="" />
            <!-- 信息 -->
            <div class="products__item__detail">
              <h4 class="products__item__title">{{ item.name }}</h4>
              <p class="products__item__price">
                <span class="products__item__single">
                  <span class="products__item__yen">&yen;</span>
                  {{ item.price }} *{{ item.count }}
                </span>
                <span class="products__item__total">
                  <span class="products__item__yen">&yen;</span>
                  {{ (item.price * item.count).toFixed(2) }}
                </span>
              </p>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { useCommonCartEffect } from '../../effects/cartEffects';
import { useRoute } from 'vue-router';
export default {
  name: 'Products',
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const { shopList, shopName, totalPrice } = useCommonCartEffect(shopId);
    return { shopList, shopName, totalPrice };
  },
};
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';
@import '../../style/mixins.scss';
.products {
  margin: 0.16rem 0.18rem 0.4rem 0.18rem;
  background: $bgColor;
  &__title {
    padding: 0.16rem;
    font-size: 0.16rem;
    color: $content-fontColor;
  }
  &__wrapper {
    overflow-y: scroll;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.55rem;
    top: 2.6rem;
    margin: 0 0.18rem;
  }
  &__list {
    background-color: $bgColor;
  }
  &__item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.08rem 0.16rem;
    border-bottom: 0.01rem solid $content-bgColor;
    // background-color: $bgColor;
    &__img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.16rem;
    }
    &__detail {
      flex: 1;
    }

    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-fontColor;
      @include ellipsis;
    }
    &__price {
      display: flex;
      justify-content: space-between;
      margin: 0.06rem 0 0 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $highlight-fontColor;
    }
    &__total {
      color: #000;
    }
    &__yen {
      font-size: 0.12rem;
    }
  }
}
</style>
